<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getSubjectListAPI, getQuestionListAPI } from '@/api/paper.js'

const questionSearch = ref({
  id: localStorage.getItem('uid'),
  subjectId: '',
  keyword: '',
  questionType: '',
  pageIndex: 1,
  pageSize: 5
})

// 考试记录
const questionList = ref([])
const questionTotal = ref(0)
const getQuestionList = async () => {
  const { data: res } = await getQuestionListAPI(questionSearch.value)
  if (res.status === 200) {
    questionList.value = res.data
    questionTotal.value = res.total
  }
}
getQuestionList()

// 学科列表
const subjectList = ref([])
const getSubjectList = async () => {
  const { data: res } = await getSubjectListAPI()
  if (res.status === 200) {
    subjectList.value = res.data
  }
}
getSubjectList()

// 切换试卷类型
const tabItemClick = (e) => {
  document.querySelector('.active').classList.remove('active')
  e.target.classList.add('active')
  questionSearch.value.questionType = e.target.name
  getQuestionList()
}

// 换页
const pageChange = (page) => {
  questionSearch.value.pageIndex = page
  getQuestionList()
  window.scrollTo(0, 0)
}
</script>

<template>
  <div class="question-container">
    <div class="question-header">
      <div class="question-header-tab">
        <span class="question-header-tab-text">题目类型：</span>
        <div class="question-header-tab-item-box">
          <button
            class="question-header-tab-item active"
            name=""
            @click="tabItemClick"
          >
            全部
          </button>
          <button
            class="question-header-tab-item"
            name="1"
            @click="tabItemClick"
          >
            单选题
          </button>
          <button
            class="question-header-tab-item"
            name="2"
            @click="tabItemClick"
          >
            多选题
          </button>
          <button
            class="question-header-tab-item"
            name="3"
            @click="tabItemClick"
          >
            判断题
          </button>
          <button
            class="question-header-tab-item"
            name="4"
            @click="tabItemClick"
          >
            填空题
          </button>
          <button
            class="question-header-tab-item"
            name="5"
            @click="tabItemClick"
          >
            简答题
          </button>
        </div>
      </div>
      <div class="question-header-select-box">
        <div class="question-header-select-search">
          <el-input
            :prefix-icon="Search"
            placeholder="请输入搜索关键字"
            size="large"
            v-model="questionSearch.keyword"
            clearable
            @change="getQuestionList()"
          ></el-input>
        </div>
        <div class="question-header-select">
          <el-select
            v-model="questionSearch.subjectId"
            placeholder="请选择学科"
            size="large"
            clearable
            @change="getQuestionList()"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="question-content" v-if="questionList.length">
      <el-card
        class="question-content-item"
        shadow="never"
        v-for="item in questionList"
        :key="item.id"
      >
        <template #header>
          <span style="margin-right: 0.2rem"
            >题型：{{ item.question_type_name }}</span
          >
          <span>学科：{{ item.subjectName }}</span>
        </template>
        <p class="question-content-item-title" v-html="item.question_title"></p>
        <div class="questionInfo-content-question-item">
          <el-radio-group
            v-if="item.question_type === 1 || item.question_type === 3"
            v-model="item.answer"
            disabled
          >
            <el-radio-button
              :label="items.prefix"
              size="large"
              v-for="items in item.content"
              :key="items.prefix"
              >{{
                `${items.prefix}&nbsp;&nbsp; ${items.content}`
              }}</el-radio-button
            >
          </el-radio-group>
          <el-checkbox-group
            v-else-if="item.question_type === 2"
            size="large"
            v-model="item.answer"
            disabled
          >
            <el-checkbox-button
              :label="items.prefix"
              v-for="(items, index) in item.content"
              :key="index"
              >{{
                `${items.prefix}&nbsp;&nbsp; ${items.content}`
              }}</el-checkbox-button
            >
          </el-checkbox-group>
          <div class="questionInfo-content-answer">
            <div class="question-result">
              <span class="text">结果：</span>
              <el-tag type="danger">错误</el-tag>
            </div>
            <div class="question-answer">
              <span class="text">标准答案： </span>
              <span class="question-answer-correct">{{
                item.correct.toString()
              }}</span>
            </div>
            <div class="user-answer">
              <span class="text">做题答案：</span>
              <span class="error"> {{ item.answer.toString() }}</span>
            </div>
            <div class="user-score">
              <span class="text">得分：</span>
              <span>{{ item.customer_score }}</span>
            </div>
            <div class="question-difficult">
              <span class="text">难度：</span>
              <el-rate
                v-model="item.difficult"
                disabled
                text-color="#ff9900"
                style="height: auto"
              />
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-empty
      v-else
      description="暂无记录"
      style="min-height: 20rem"
    ></el-empty>
    <el-pagination
      layout="prev, pager, next, jumper,total"
      :total="questionTotal"
      :page-size="questionSearch.pageSize"
      prev-text="上一页"
      next-text="下一页"
      @current-change="pageChange"
    />
  </div>
</template>

<style lang="scss" scoped>
@media screen and (max-width: 1024px) {
  .question-container {
    margin: 0.2rem 0.6rem;
    .question-header {
      flex-direction: column;
      align-items: flex-start !important;
      padding-bottom: 0.14rem;
      .question-header-tab {
        margin-bottom: 0.14rem;
      }
      .question-header-select-box {
        display: flex;
        width: 100%;
        // flex-direction: column;
        .question-header-select-search {
          flex: 1;
          max-height: 0.5rem;
          margin-bottom: 0.1rem;
          :deep(.el-input--large .el-input__wrapper) {
            padding: 0.01rem 0.15rem;
            font-size: 0.14rem;
          }
        }
        .question-header-select {
          flex: 1;
          max-height: 0.4rem;
          :deep(.el-select--large .el-select__wrapper) {
            padding: 0.08rem 0.16rem;
            font-size: 0.14rem;
          }
        }
      }
    }

    .el-pagination {
      justify-content: flex-end;
      &:deep(.el-icon) {
        font-size: 1.5rem;
      }
      &:deep(.el-pager) {
        .number {
          font-size: 0.16rem;
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
}
.question-container {
  margin: 0.2rem 0.6rem;
  .question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.14rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid #e1e1e1;
    font-size: 0.16rem;
    .question-header-tab {
      display: flex;
      align-items: center;
      flex: 3;
      .question-header-tab-text {
        font-size: 0.14rem;
      }
      .question-header-tab-item-box {
        display: flex;
        .question-header-tab-item {
          margin-right: 0.2rem;
          padding: 0.06rem;
          cursor: pointer;
          border: 0;
          background-color: transparent;
          border-radius: 0.06rem;
          font-size: 0.14rem;
          &.active {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }
    .question-header-select-box {
      display: flex;
      flex: 1;
      .question-header-select-search {
        margin-right: 0.1rem;
        display: flex;
        flex: 1;
      }
      .question-header-select {
        flex: 1;
        display: flex;
      }
    }
  }

  .question-content {
    font-size: 0.16rem;
    .question-content-item {
      margin-bottom: 0.2rem;
      min-height: 2rem;
      .question-content-item-title {
        margin-bottom: 0.2rem;
        &:deep(.fill-span) {
          margin: 0 0.06rem;
          padding: 0 0.4rem;
          border-bottom: 2px solid #ccc;
        }
      }
      .questionInfo-content-question-item {
        .el-checkbox-button {
          --el-radio-button-disabled-checked-fill: var(
            --el-border-color-extra-light
          );
          &.is-checked:deep(.el-checkbox-button__inner) {
            background-color: var(--el-radio-button-disabled-checked-fill);
          }
        }
        .questionInfo-content-answer {
          display: flex;
          min-height: 1.24rem;
          flex-direction: column;
          justify-content: space-around;
          margin-top: 0.2rem;
          margin-left: 0.2rem;
          .question-answer-correct {
            color: #67c23a;
          }
          .user-answer {
            .error {
              color: #f56c6c;
            }
          }
          .question-difficult {
            display: flex;
            align-items: center;
          }
          .text {
            display: inline-block;
            width: 0.8rem;
            text-align-last: justify;
          }
        }
      }
    }
  }

  .el-pagination {
    justify-content: flex-end;
    &:deep(.el-icon) {
      font-size: 1.5rem;
    }
    &:deep(.el-pager) {
      .number {
        font-size: 0.16rem;
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }
}
</style>
